<!--
 * @Author: wuzhen
 * @Date: 2019-12-04 17:56:54
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-13 10:57:28
 * @Description: 通知管理
 -->
<template>
  <Card style="width:100%" dis-hover>
    <!-- 搜索表头/表头按钮 -->
    <search-table :label-width="90" :search-props="searchProps" @handle-filter="handleFilter" @handle-click="handleClick">
      <template v-slot:FormItem>
        <FormItem :label-width="0">
          <Input :type="type === 'createuserid'?'number': 'text'" v-model="keyword" clearable>
          <Select v-model="type" slot="prepend" style="width:90px">
            <Option value="groupname">群组名称</Option>
            <Option value="createuserid">群主ID</Option>
          </Select>
          </Input>
        </FormItem>
      </template>
      <template v-slot:status>
        <Select style="width:200px" placeholder="请选择状态" v-model="status">
          <Option v-for="child in statusList" :value="child.value" :key="child.value" :label="child.label"></Option>
        </Select>
      </template>
    </search-table>
    <wz-table ref="table" :search-api="searchApi" :handle-btn="handleBtn" :columns="columns" @handle-click="handleClick">
      <template v-slot:action="slotProps">
        <Dropdown placement="bottom-start" @on-click="(e) => handleClick(e,slotProps.row)">
          <a href="javascript:void(0)">
            操作
            <Icon type="md-more" />
          </a>
          <DropdownMenu slot="list">
            <DropdownItem name="users">成员管理</DropdownItem>
            <DropdownItem name="chatRecord">聊天记录</DropdownItem>
            <DropdownItem name="dissolution">违规解散</DropdownItem>
            <!-- <DropdownItem name="on">违规解散</DropdownItem>
            <DropdownItem name="on">修改配置</DropdownItem>
            <DropdownItem name="offline" :disabled="slotProps.row.onlinestatus === 10">删除</DropdownItem> -->
          </DropdownMenu>
        </Dropdown>
      </template>
    </wz-table>
    <!-- 添加、编辑 -->
    <Modal v-model="editDrawer" :title="editTitle" @on-cancel="editDrawer = false" width="500">
      <wz-form v-if="editDrawer" ref="form" :label-width="100" :form-obj="formObj" :form-props="formProps" />
      <div slot="footer">
        <Button type="text" @click="editDrawer = false">取消</Button>
        <Button type="primary" @click="onSubmit">确定</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import index from "./mixins";
import form from "./mixins/form";
import { getGroupList,updateGroupStatus } from "@/request/api";
export default {
  mixins: [index, form],
  data() {
    return {
      searchApi: getGroupList,
      apiParams: {
        flipper: {
          offset: 0,
          limit: 15,
          sort: "createtime desc"
        },
        bean: {
          status: "10"
        }
      },
      editDrawer: false,
      editTitle: "添加",
      formObj: {},
      type: "groupname",
      keyword: ""
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取table数据
    getData() {
      this.$refs.table.getData(this.apiParams);
    },
    // 搜索
    handleFilter(params) {
      let apiParams = {};
      if (params.date && params.date.length && params.date[0]) {
        apiParams["createtime"] = {
          min: new Date(params.date[0] + " 00:00:00").getTime(),
          max: new Date(params.date[1] + " 23:59:59").getTime()
        };
      }
      apiParams = { ...apiParams, ...params };
      this.apiParams["bean"] = { ...apiParams };
      this.apiParams["bean"][this.type] = this.keyword;
      this.apiParams["bean"]["status"] = this.status;
      this.apiParams["flipper"] = {
        offset: 0,
        limit: 15,
        sort: "createtime desc"
      };
      this.getData();
    },
    handleClick(type, row) {
      this.formObj = row || {};
      this.type = type;
      switch (type) {
        case "edit":
          this.editTitle = "编辑";
          break;
        case "users": // 成员管理
          this.$router.push({
            path: `/groupManagement/users/${row.groupid}`,
            query: {
              groupname: row.groupname
            }
          });
          break;
        case "chatRecord": // 聊天记录
          this.$router.push({
            path: `/groupManagement/chatRecord/${row.groupid}`,
            query: {
              groupname: row.groupname
            }
          });
          break;
        case 'dissolution':
          this.$Modal.warning({
            title: "友情提示",
            content: "确定要解散群？",
            closable: true,
            onOk: () => {
              this.editOnDestroy(row);
            }
          });
          break;
        default:
          break;
      }
      // this.editDrawer = true;
    },
    changeReportSize() {},
    changeReportPage() {},
    // 确定
    async onSubmit() {
      try {
        const validate = await this.$refs.form.validate();
        if (validate.valid) {
          let res;
          if (this.type === "add") {
            // res = await addAdmin({
            //   bean: JSON.stringify({
            //     ...validate.formData
            //   })
            // });
          } else if (this.type === "edit") {
            // res = await editAdmin({
            //   bean: JSON.stringify({
            //     ...validate.formData
            //   })
            // });
          }
          if (res.code === 200) {
            this.$Message.success("操作成功");
            this.editDrawer = false;
            this.getData();
          } else {
            this.$Message.error("操作失败");
          }
        }
      } catch (error) {
        throw error;
      }
    },
    // 解散群
    async editOnDestroy(row){
       try{
        const res =await updateGroupStatus({
           groupid: row.groupid
        })
        if (res.code === 200) {
          this.$Message.success("操作成功");
          this.getData();
        }
      } catch (err){
        throw err
      }
    }
  }
};
</script>
